<template>
  <div class="boss">
    <div class="top">
      <div class="topimg"><img src="../assets/js.png" alt=""></div>
    </div>
    <div class="login">
      <div class="login-zuo"><img src="../assets/kl.jpg" alt=""></div>
      <div class="login-you">
        <el-card class="box-card" style="height: 100%;">
          <div class="box-card-title" style="margin-top:7%; font-size: 30px;">账号密码登录</div>
          <!-- 表单 -->
          <el-form ref="form" :rules='formrules' :model="form"  label-width="">
            <el-form-item prop="username" style="margin-top: 5%;">
              <el-input placeholder="用户名" v-model="form.username" prefix-icon="el-icon-user-solid"
                style="margin-top: 9%; width: 70%;"></el-input>
            </el-form-item>
            <el-form-item prop="pass" style="margin-top: 6%;">
              <el-input placeholder="密码" v-model="form.pass" prefix-icon="el-icon-lock"
                style="margin-top: 2%; width: 70%;"></el-input>
            </el-form-item>
            <el-form-item size="small" style="margin-top: 6%;">
              <el-button type="primary" style="height: 40px; font-size: 20px; font-weight: bold; width: 70%; margin-top: 3%;" @click="loginsubmit('form')">登录</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </div>
    </div>
    <div class="buttom">
        <span>云教务管理系统@2021 lCP京备0000000 - 123.com</span>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        form: {
          username:'',
          pass: '',
        },
        formrules:{
            username:[
               { required: true, message: '请输入用户名', trigger: 'blur' },
               { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            pass:[
            { required: true, message: '请输入密码', trigger: 'blur' },
               { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
        }
      }
    },
    methods:{
        loginsubmit(formname){
          this.$refs[formname].validate((res)=>{
               if(res){
                   this.axios.post("http://www.eshareedu.cn/edusystems/api/admin/checklogin",this.form).then((res) => {
                     console.log(res)
                    if(res.data.errCode=='10000'){
                        // 防非法登录 存token
                      window.sessionStorage.setItem('access_token',res.data.data.token) 
                      this.$message.success("登陆成功")
                      this.$router.push('/xuename')
                    }else{
                        this.$message.error('登陆失败,')
                    }
                  
                  })
                
               }else{
                   console.log("登陆失败")
                   this.$message.error("登陆失败")
               }
           })
            // this.$router.push('/aa')
        }
    },
      
  }

</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .boss {
    width: 100%;
    height: 800px;
    background-color: rgb(243, 243, 243);
  }

  .top {
    width: 100%;
    height: 50px;
    background-color: #fff;
    margin-top: 10px;
    display:flex;
    /* align-items: center; */
  }

  .top .topimg {
    width: 15%;
    height: 100%;
    /* background-color: blueviolet; */
  }

  .top .topimg img {
    width: 100%;
    height: 100%;
  }

  .login {
    width: 81%;
    height: 60%;
    /* background-color: cadetblue; */
    margin: 5% auto;
    display: flex;
    justify-content: space-between;
  }

  .login .login-zuo {
    width: 60%;
    height: 100%;
    /* background-color: cornflowerblue; */
  }

  .login .login-zuo img {
    width: 100%;
    height: 100%;
  }

  .login .login-you {
    width: 36%;
    height: 100%;
    /* background-color: cornflowerblue; */
  }

  .box-card-title {
    font-size: 10rpx;
    color: cornflowerblue;
  }
 .boss .buttom{
    width: 100%;
    height: 150px;
    background-color: #fff;
    display: flex;
    margin-top: 5%;
    justify-content: center;
    align-items: center;
  }
</style>
